---
title: Architecture
description: Explains how the architecture of Takumi is designed at a high level.
icon: ToyBrick
---

## Data Structure

### Format

Takumi uses JSON format as its the most universal format that can be easily serialized and deserialized.

### Node

HTML is complex, it defines [a lot of elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) that are used to build the web. But since we are building static images, only three types of nodes are required: **an image, a text, or a container**.

The details are described in the [Reference](/docs/reference#node-types) section.

### `fromJsx` helper

To bridge the gap between JSX and nodes, we provide a `fromJsx` helper function that helps mapping elements to nodes, and handle React specific features like Server Components and Fragments.

The rules for this function are simple, you can just [look at the implementation](https://github.com/kane50613/takumi/blob/master/takumi-helpers/src/jsx/jsx.ts) to understand it.

- React (Server) Components are resolved to their final values before processing.
- `<img>` and `<svg>` elements become an Image node with style applied.
- All other React elements become a Container node with style and style presets applied.
- Rest of the primitive types (string/number) are automatically converted to Text node.
- `props.style` is passed on to the container node as is.

## Styling

Takumi uses [Taffy](https://github.com/DioxusLabs/taffy) to layout the positions, and [Parley](https://github.com/linebender/parley) to layout the text, so it mostly depends on the features that these two libraries support.

### CSS

The syntax parser is inspired by [lightningcss](https://github.com/parcel-bundler/lightningcss), check [Reference](/docs/reference#style-properties) to get the full list of supported properties.

### Tailwind

Originally [`twrnc`](https://www.npmjs.com/package/twrnc) was used, but it was removed in favor of our own implementation.

Arbitrary values would just be passed to the CSS parser mentioned above.

## Distribution

### As Rust Crate

If you want to build a port of Takumi to your own language or just embed in Rust application, install `takumi` as a dependency.

```toml
[dependencies]
takumi = "*" # replace with the latest version
```

The documentation is available on [docs.rs](https://docs.rs/takumi/latest/takumi/).

### For Node.js Runtime

In order to utilize the power of multithreading and non-blocking, instead of building for wasm, we target [napi-rs](https://napi.rs/) to build the native binary for Node.js.

The package is published as [`@takumi-rs/core`](https://www.npmjs.com/package/@takumi-rs/core) on npm.

### For Edge Runtime / Browser

This is relatively rare, but if you are using a Edge runtime or browser, you can use the [`@takumi-rs/wasm`](https://www.npmjs.com/package/@takumi-rs/wasm) package.

And to keep the wasm file small, woff font loading is not supported and theres no bundled fonts (so font needs to be loaded to render text).
